<template>
    <a-modal v-model:open='show' destroyOnClose :title='title' :width="width" :ok-text='confirmText || $t("confirm")' :cancel-text='cancelText || $t("cancel")' :confirm-loading='loading' @cancel='close' @ok='ok'>
        <slot></slot>
    </a-modal>
    <!-- <Beleport to='body'>
        <div class='mask' v-if='visible'>
            <div :class='$style.modal' :style='{width : modalWidth}'>
                <div :class='$style.header'>
                    <span :class='$style.title'>{{title}}</span>
                    <CircleClose :class='$style.close' @click='close' />
                </div>
                <div :class='$style.body'>
                    <slot></slot>
                </div>
                <div :class='$style.footer'>
                    <div>
                        <a-button size='medium' @click='close'>{{cancelText || '取 消'}}</a-button>
                    </div>
                    <div>
                        <a-button size='medium' type='primary' :loading='loading' @click='doConfirm'>{{confirmText || '确 定'}}</a-button>
                    </div>
                </div>
            </div>
        </div>
    </teleport> -->
</template>

<script lang='ts' setup>
    import { computed, ref } from "vue"
    const props = defineProps<{
        visible : boolean;
        width : number|string;
        title : string;
        cancelText? : string;
        confirmText? : string;
        confirm? : () => void;
    }>()

    const emit = defineEmits<{
        (e : 'update:visible', visible : boolean) : void;
        (e : 'close') : void;
    }>()

    const v = ref(true)

    const loading = ref(false)
    const show = computed({
        get : () => props.visible,
        set : () => {
            close()
        }
    })

    function close() {
        if(!loading.value) {
            emit('close')
            emit('update:visible', false)
        }
    }

    async function ok() {
        if(props.confirm) {
            loading.value = true
            try {
                await props.confirm()
            } catch (error) {
            }
            loading.value = false
        }else {
            close()
        }
        
    }

    const modalWidth = computed(() => {
        return isNaN(props.width as number) ? props.width : props.width + 'px'
    })

</script>


<style lang='scss' module>
    // $padding : 37px;
    // .modal{
    //     position: absolute;
    //     left: 50%;
    //     top: 50%;
    //     transform: translate(-50%, -50%);
    //     background: #fff;
    //     box-shadow: 0px 1px 22px 3px rgba(155, 167, 179, 0.22);
    //     border-radius: 8px;

    //     .header{
    //         height: 70px;
    //         background: #F2F6FE;
    //         border-radius: 8px 8px 0px 0px;
    //         padding: 0 $padding;

    //         display: flex;
    //         align-items: center;
    //         justify-content: space-between;

    //         .title{
    //             font-size: 18px;
    //             font-weight: 500;
    //             color: #001529;
    //         }

    //         .close{
    //             cursor: pointer;
    //             font-size: 20px;
    //             color: $primaryColor;
    //         }
    //     }

    //     .body{
    //         padding: 24px $padding;
    //         max-height: 600px;
    //         overflow-y: auto;

    //     }

    //     .footer{
    //         height: 68px;
    //         padding: 0 $padding;
    //         border-top: 1px solid #E1E3F1;
    //         display: flex;
    //         justify-content: right;
    //         align-items: center;
    //         gap: 10px;
    //     }
    // }
</style>